Appling Margin to an Element
Description
Margin is space between the element border and its surroundings. This includes other elements and the parent element.
The following list has the description for the margin properties.
- margin-top
Sets the margin for the top edge.
Value: auto length % - margin-right
Sets the margin for the right edge.
Value: auto length % - margin-bottom
Sets the margin for the bottom edge.
Value: auto length % - margin-left
Sets the margin for the left edge.
Value: auto length % - margin
This shorthand property sets the margin for all edges in a single declaration.
Value: 1 - 4 auto length %
The percentage values are always derived from the width of the containing block, even when used for padding the top and bottom edge.
Example
The following code adds Margin to Elements.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {<!-- w ww .j a v a2 s .c o m-->
border: 4px solid black;
background: lightgray;
padding: 4px;
margin: 4px 20px;
}
</style>
</head>
<body>
<img src="http://www.java2s.com/style/download.png" alt="small banana">
<img src="http://www.java2s.com/style/download.png" alt="small banana">
</body>
</html>
For an inline element, its margin isn't displayed at the top and bottom edges.